import React from 'react';
import {
  WebView,
  View,
  TouchableOpacity,
  Image,
  Text,
} from 'react-native';
import WebViewPage from './WebViewPage';
import {HtmlUtils} from '../../utils/Utils';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Config from '../../config';
//比普通的页面加上了一个webview控件的监听，当webview控件初始化完之后才赋值url，这样的话
//能避免url的网页读取到了错误的宽高，而不是webview控件的宽高
export default class WebViewPageNew extends WebViewPage {
  constructor(props) {
    super(props);

    this.state.initComplete = false;
    this.state.timerComplete = false;
    this._initTimer = null;
    this._startTimer();
    this.isNeedReload = true;
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.pageData.routeData.url != nextProps.pageData.routeData.url ||
      this.state.initComplete != nextState.initComplete || this.state.timerComplete != nextState.timerComplete ||
      this.state.url != nextState.url || this.state.source != nextState.source;
  }

  _startTimer() {
    this._initTimer = setTimeout(()=>{
     this._initTimer && clearTimeout(this._initTimer);
     this._initComplete = true;
     this._initTimer = null;
     this.setState({
       timerComplete:true,
     });
    }, 800);
  }

  _onWebViewMessage(event) {
    if(!event.nativeEvent.data){
      return;
    }
    // ToastUtils.show(event.nativeEvent.data);
  }

  _dealEnterPage() {
    super._dealEnterPage();
    this._startTimer();
    this.isNeedReload = false;
  }

  isRenderWebView(){
    return this.state.timerComplete === true;
  }

  _getSource() {
    // return {uri:"http://www.baidu.com/"}
    // return {uri:"https://s.wcd.im/v/26nvkZ3p/"}
    if(this.state.timerComplete === true && this.state.source != null && this.state.source) {
      //  if(this.isNeedReload ==false){
      //  return this.state.source;
      // }
      // return this.getHtmlWeb("https://s.wcd.im/v/26nvkZ3p/", SizeUtils.getWindowSize().width, SizeUtils.getWindowSize().height - Config.paddingTop);
      return this.getHtmlWeb(this.state.source.uri, SizeUtils.getWindowSize().width, SizeUtils.getWindowSize().height - Config.paddingTop);
      // return this.state.source;
      // return {uri:"https://s.wcd.im/v/26nvkZ3p/"}
    }
    else {
      return {uri:""};
    }
  }


  getHtmlWeb(url, width, height) {
       return {html:`<!doctype html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta charset="utf-8">
        </head>
        <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
        <body >
        </body>
        <script type="text/javascript">
        window.location.href = "`+ url+`";
        </script>
      </html>`}
  }

  _dealLeavePage(){
    super._dealLeavePage();
    this.setState({
      source:null,
    })
    this.state.timerComplete = false;
    this._initTimer && clearTimeout(this._initTimer);
  }

  _initRef(ref) {
    if(ref) {
      this._webViewRef = ref;
      this.setState({
        initComplete:true,
      });
    }
  }
}
